import React from "react";

class App extends React.Component {
  state = {
    name: "张三",
    isShow: false,
  };

  // 有条件的返回一段 JSX
  // render(): React.ReactNode {
  //   if (this.state.isShow) {
  //     return (
  //       <div>
  //         <button onClick={() => this.setState({ isShow: !this.state.isShow })}>
  //           Toggle
  //         </button>
  //         <h1>App</h1>
  //         <button>我是否显示</button>
  //       </div>
  //     );
  //   } else {
  //     return (
  //       <div>
  //         <button onClick={() => this.setState({ isShow: !this.state.isShow })}>
  //           Toggle
  //         </button>
  //         <h1>App</h1>
  //       </div>
  //     );
  //   }
  // }

  // 选择性的返回 null 与 三目运算符
  // render(): React.ReactNode {
  //   return (
  //     <div>
  //       <button onClick={() => this.setState({ isShow: !this.state.isShow })}>
  //         Toggle
  //       </button>
  //       <h1>App</h1>
  //       {this.state.isShow ? <button>我是否显示</button> : null}
  //     </div>
  //   );
  // }

  // 与运算
  // render(): React.ReactNode {
  //   return (
  //     <div>
  //       <button onClick={() => this.setState({ isShow: !this.state.isShow })}>
  //         Toggle
  //       </button>
  //       <h1>App</h1>
  //       {this.state.isShow && <button>我是否显示</button>}
  //     </div>
  //   );
  // }

  render(): React.ReactNode {
    let a = null;

    if (this.state.isShow) {
      a = <button>我是否显示</button>;
    }

    return (
      <div>
        <button onClick={() => this.setState({ isShow: !this.state.isShow })}>
          Toggle
        </button>
        <h1>App</h1>
        {a}
      </div>
    );
  }
}

export default App;
